<template>
  <div class="bottom-charts">
    <div class="bc-chart-item">
       <div class="title">200</div>
      <div class="foot">
      <img src="./img/view_1.png" alt />
      <div class="bcci-header">平台车辆总数</div>
      </div>
    </div>

    <div class="bc-chart-item">
      <div class="title">147</div>
      <div class="foot">
        <img src="./img/view_2.png" alt />
        <div class="bcci-header">当前在线车辆</div>
      </div>
    </div>

    <div class="bc-chart-item">
      <div class="title">12</div>
      <div class="foot">
        <img src="./img/view_3.png" alt />
        <div class="bcci-header">报警总数</div>
      </div>
    </div>

    <div class="bc-chart-item">
      <div class="title">0</div>
      <div class="foot">
        <img src="./img/view_4.png" alt />
        <div class="bcci-header">未处理报警</div>
      </div>
    </div>

    <div class="bc-chart-item">
      <div class="title">4654654</div>
      <div class="foot">
      <img src="./img/view_5.png" alt />
      <div class="bcci-header">总行驶里程(km)</div>
      </div>
    </div>

    <div class="bc-chart-item">
       <div class="title">86655000</div>
      <div class="foot">
      <img src="./img/view_6.png" alt />
      <p class="bcci-header">总行驶时长(时)</p>
      </div>
    </div>
  </div>
</template>

<script>
// import LabelTag from './LabelTag'

export default {
  name: 'BottomCharts',
  components: {
    // LabelTag
  },
  data () {
    return {}
  }
}
</script>

<style lang="less">
.bottom-charts {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .bc-chart-item {
    text-align: center;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    .title {
      color: #12fdfb;
      font-size: 30px;
      text-align: center;
      line-height: 70px;
    }
    .foot {
      width: 100%;
      height: calc(100% - 70px);
      text-align: center;
    }
    img {
      width: 80%;
      margin-top: 20px;
    }
    span {
      display: block;
      color: #12fdfb;
      font-size: 30px;
    }
    .bcci-header {
      color: #fff;
      text-align: center;
      font-size: 20px;
      margin-top: 20px;
    }
  }

  .dv-active-ring-chart {
    height: calc(~"100% - 80px");
  }

  .label-tag {
    height: 30px;
  }

  .active-ring-name {
    font-size: 18px !important;
  }

  .decoration-1,
  .decoration-2,
  .decoration-3 {
    display: absolute;
    left: 0%;
  }
}
</style>
